onselectionchangeを用いた、iOS Safariでのカーソル移動検知
/icons/hr.icon
2019/5/7
iPad Pro (iOS) にキーボードを繋いで動作確認する
これまでの調査 daiiz.icon
Scrapboxのsearch box内では矢印キーでカーソル移動できるか？
ここは普通のinputタグなのでできる
カーソル移動を検知するだけの隠しinputを置くというアイデアのタネ
そのとき、どんなイベントが飛んでいるか？
keydown, keyup が取れるか？
alert(e.keyCode)を仕込んで調べる
table:input
← ↑ ↓ →
keyDown x x x x
keyUp x x x x
keyPress x x x x
ふつうの文字に関しては、すべてo
textareaにするとどうか
table:textarea
← ↑ ↓ →
keyDown x x x x
keyUp x x x x
keyPress x x x x
やはりkeyDown, keyUp, keyXXXX は諦めるしかない
本題
onselectionchange
document.onselectionchange = e => { console.log(e); }
table:input
← ↑ ↓ →
onselectionchange o o o o
document.activeEvent === document.querySelector(".input-dummy")のときだけ反応すればいい
さらに ArrowLeft (37), ArrowRight (39) だけ反応すればいい
攻略できた
フォーカスの状態遷移
.text-input (既存)
文字入力を受け付けるための隠しtextarea
.input-dummy (仮称、新設)
onselectionchangeを発火させるための隠しinput
https://svg-drawing.herokuapp.com/api/usercontent/6c3a875780334997b1bba5ee7ec4d2ba.svg
これを実装できればiOSでもカーソルを自在に操れる
.input-dummyに対する小細工は相変わらず必要
top位置調整
valueを十分に長くする
長押しさせない
OS標準の範囲選択UIが発動してしまうため
input-dummyの隠し方
code:css
.input-dummy {
border: none;
background-color: transparent;
color: transparent;
caret-color: transparent;
}
visibility: hidden や readOnly は使えない
課題
focusの移し合いは現実的でない
できたが、かなり不安定 daiiz.icon*5
上に書いたよりずっとシンプルにできたので、説明も書き直す